<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .el-table__empty-block {
            height: 0;
        }
    </style>

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">商家订单管理</h1>
                <el-card class="box-card">
                    <el-form :inline="true" ref="search" :model="search" label-width="120px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="订单搜索">
                                    <el-input v-model="search.orderCode" placeholder="订单号"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="客户搜索">
                                    <el-input v-model="search.customerNick" placeholder="昵称/手机号"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="下单时间">
                                    <el-date-picker
                                            v-model="search.createTimeStart"
                                            type="date"
                                            placeholder="开始日期">
                                    </el-date-picker>&nbsp;至&nbsp;
                                    <el-date-picker
                                            v-model="search.createTimeEnd"
                                            type="date"
                                            placeholder="结束日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="订单状态">
                                    <el-select placeholder="请选择状态" v-model="search.status">
                                        <el-option label="取消" value="-1"></el-option>
                                        <el-option label="待付款" value="1"></el-option>
                                        <el-option label="待发货" value="2"></el-option>
                                        <el-option label="待收货" value="3"></el-option>
                                        <el-option label="已确认" value="4"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="付款完成时间">
                                    <el-date-picker
                                            v-model="search.payTimeStart"
                                            type="date"
                                            placeholder="开始日期">
                                    </el-date-picker>&nbsp;至&nbsp;
                                    <el-date-picker
                                            v-model="search.payTimeEnd"
                                            type="date"
                                            placeholder="结束日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>

                            <div style="float: right">
                                <el-button type="primary" @click.native.prevent="getList">查询</el-button>
                                <el-button type="primary" @click.native.prevent="clearSearch">清空查询条件</el-button>
                            </div>

                        </el-row>
                    </el-form>
                </el-card>
                <div class="clearfix" style="margin-top: 10px">
                    <el-button type="primary" style="float: left;" @click.native="exportItemOrder">导出商家订单概要</el-button>
                    <el-button type="primary" style="float: left;" @click.native="exportOrderItemDetail">导出商家订单明细</el-button>
                </div>
                <el-card class="box-card" style="margin-top: 10px">
                    <el-table
                            :data="orderList"
                            border
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                label="序号"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="orderCode"
                                label="订单号"
                                width="210">
                        </el-table-column>
                        <el-table-column
                                prop="customerNick"
                                label="客户昵称">
                        </el-table-column>
                        <el-table-column
                                prop="customerTel"
                                label="手机号">
                        </el-table-column>
                        <el-table-column
                                prop="amount"
                                label="总金额">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="订单状态"
                                :formatter="formatterStatus">
                        </el-table-column>
                        <el-table-column
                                prop="createTime"
                                align="center"
                                :formatter="formatterTime"
                                label="下单时间"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="payTime"
                                align="center"
                                :formatter="formatterPayTime"
                                label="付款完成时间"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作"
                                inline-template>
                            <div style="margin-left: -10px">
                                <el-dropdown>
                                    <el-button size="small" type="primary">
                                        操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown" align="center" v-if="isPermission('order:orgItemList', user.permissions)">
                                        <el-dropdown-item><el-button size="mini" type="primary" class="el-icon-edit" @click.native.prevent="detail(row.id)">详情</el-button></el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @current-change="handleCurrentPageChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="totalCount"
                            style="margin-top: 10px">
                    </el-pagination>
                </el-card>
                <el-dialog title="填写订单物流" v-model="dialogFormVisible">
                    <div style="text-align: center">
                        <el-form :model="form" label-width="80px">
                            <el-form-item label="物流公司">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="物流单号">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="备注">
                                <el-input type="textarea" v-model="form.name"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return {
                user: ${(user)!'null'},
                headerNavList: list.headerNavList,
                dialogFormVisible: false,
                accountNavList: list.accountNavList,
                form: {},
                leftMenuList: list.menu,
                search: {
                    orderCode: '',
                    customerNick: '',
                    status:'',
                    createTimeStart: '',
                    createTimeEnd: '',
                    payTimeStart: '',
                    payTimeEnd: ''
                },
                activeNames: ['1', '2'],
                orderList: [],
                currentPage: list.currentPage,
                pageSize: list.pageSize,
                totalCount: 0
            }
        },
        mounted:function () {
            this.getList ();
        },
        methods: {
            formatterStatus(row){
                if (row.status === -1) {
                    return '取消'
                } else if (row.status === 1) {
                    return '待付款'
                } else if (row.status === 2) {
                    return '待发货'
                } else if (row.status === 3) {
                    return '待收货'
                } else if (row.status === 4) {
                    return '已确认'
                }
            },
            exportOrderItemDetail () {
                window.open("/order/outPutOrderItem/org?orderCode=" + this.search.orderCode + "&customerNick=" + this.search.customerNick
                        + "&status=" + this.search.status + "&createTimeStart=" + this.formatTime(this.search.createTimeStart, true)
                        + "&createTimeEnd=" + this.formatTime(this.search.createTimeEnd, true) + "&payTimeStart=" + this.formatTime(this.search.payTimeStart, true)
                        + "&payTimeEnd=" + this.formatTime(this.search.payTimeEnd, true));
            },
            exportItemOrder () {
                window.open("/order/outPutOneLevelOrg?orderCode=" + this.search.orderCode + "&customerNick=" + this.search.customerNick
                        + "&status=" + this.search.status + "&createTimeStart=" + this.formatTime(this.search.createTimeStart, true)
                        + "&createTimeEnd=" + this.formatTime(this.search.createTimeEnd, true) + "&payTimeStart=" + this.formatTime(this.search.payTimeStart, true)
                        + "&payTimeEnd=" + this.formatTime(this.search.payTimeEnd, true));
            },
            formatterTime (row, column) {
                if (row.createTime !== undefined && (row.createTime + "").length >= 10) {
                    return (row.createTime + "").substring(0, 10);
                } else {
                    return row.createTime;
                }
            },
            formatterPayTime (row, column) {
                if (row.payTime !== undefined && (row.payTime + "").length >= 10) {
                    return (row.payTime + "").substring(0, 10);
                } else {
                    return row.payTime;
                }
            },
            handleCurrentPageChange(val) {
                this.currentPage = val
                this.getList()
            },
            detail (orderId) {
                window.location.href = '/order/item/detail?orderId=' + orderId
            },
            fill () {
                this.dialogFormVisible = true
            },
            review () {
                window.location.href = '/item/review'
            },
            getList () {
                let that = this
                let obj = {}
                obj.currentPage = this.currentPage
                obj.pageSize = this.pageSize
                if (this.search.orderCode != '') {
                    obj.orderCode = this.search.orderCode
                }
                if (this.search.customerNick != '') {
                    obj.customerNick = this.search.customerNick
                }
                if (this.search.status != '') {
                    obj.status = this.search.status
                }
                if (this.search.createTimeStart != '') {
                    obj.createTimeStart = this.formatTime(this.search.createTimeStart, true)
                }
                if (this.search.createTimeEnd != '') {
                    obj.createTimeEnd = this.formatTime(this.search.createTimeEnd, true)
                }
                if (this.search.payTimeStart != '') {
                    obj.payTimeStart = this.formatTime(this.search.payTimeStart, true)
                }
                if (this.search.payTimeEnd != '') {
                    obj.payTimeEnd = this.formatTime(this.search.payTimeEnd, true)
                }
                let loading = this.$loading({fullscreen: true, lock: true, text: '加载中'});
                this.http('/order/list1',obj,function (res) {
                    if(res.status === 200){
                        that.orderList = res.data.list;
                        that.totalCount = res.data.total;
                        loading.close();
                    }else{
                        loading.close();
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定',
                        })
                    }
                },function (res) {
                    loading.close();
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            clearSearch () {
                this.search.orderCode = ''
                this.search.customerNick = ''
                this.search.status = ''
                this.search.createTimeStart = ''
                this.search.createTimeEnd = ''
                this.search.payTimeStart = ''
                this.search.payTimeEnd = ''
                this.currentPage = 1
                this.getList()
            }
        }
    })
</script>

<!-- 20170105 --></body>
</html>